<template>
  <div class="sentiment-heatmap-container">
    <div class="chart" id="chart_left1" ref="chart_left1"></div>
  </div>
</template>

<script>
export default {
  name: "topicChange",
  data() {
    return {
      chartOption: [],
      topicColor: [],
      chart: null,
    }
  },
  mounted() {

  },
  methods: {
    getEchartLeft1() {
      let xAxis_data = this.chartOption.name

      // 实例化对象
      let myChart = this.$echarts.init(this.$refs.chart_left1);
      this.chart = myChart
      let outer = this;
      let option = {
        textStyle: {
          color: '#b3ccf8',
          fontSize: 13
        },
        tooltip: {
          trigger: 'axis', axisPointer: {type: 'shadow'},
          position: function (point) {
            return [point[0], '100%'];
          },
          formatter: function (params) {//这里就是控制显示的样式
            let relVal = params[0].name;
            let nextDate = new Date(params[0].name);
            nextDate.setDate(nextDate.getDate() + outer.chartOption.per - 1);
            let month = nextDate.getMonth();//月
            let day = nextDate.getDate();//日
            relVal += '-' + ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + '/' + (day > 9 ? day : ("0" + day));
            for (let i = 0, l = params.length; i < l; i++) {
              //marker 就是带颜色的小圆圈 seriesName x轴名称  value  y轴值 后面就是计算百分比
              relVal += '<br/>' + params[i].marker + params[i].seriesName + '  : 数量 : ' + outer.chartOption.cnt[params[0].dataIndex][i] + ', 占比 : ' +
                  parseFloat(params[i].value).toFixed(2) + "%";
            }
            return relVal;
          },
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '2%',
          right: '6%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            interval: 0,
          },
          data: xAxis_data
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: { //y轴设置为%
            show: true,
            interval: 'auto',
            formatter: '{value}%'
          },
        },
        series: []
      };

      for (let i = 0; i < 6; i++) {
        let t = []
        for (let j = 0; j < this.chartOption.data.length; j++)
          t.push(this.chartOption.data[j][i])
        option.series.push({
          name: this.chartOption.title[i],
          type: 'line',
          // stack: 'Total',
          color: this.topicColor[i],
          data: t,
          lineStyle: {
            width: 2
          },
          emphasis: {
            disabled: false,
            focus: 'self',
            // lineStyle: {
            //   width: 6,	// hover时的折线宽度
            // }
          }
        })
      }

      // 把配置给实例对象
      myChart.setOption(option, true);
      myChart.on('mouseover', function(params) { //添加事件
        // myChart.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活点击区域高亮
        let number = params.seriesIndex
        // console.log(number)
        outer.highlight(number)
        outer.$emit('change', number)
      });
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    cancelHighlight() {
      for (let i = 0; i < 6; i ++ )
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: i,
        })
    },
    highlight(index) {
      // console.log(index)
      this.cancelHighlight()
      this.chart.dispatchAction({
        type: 'highlight',
        seriesIndex: index,
      })
    }
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.sentiment-heatmap-container {
  .chart {
    height: 3rem;
  }
}
</style>
